<template>
  <teleport :to="element_id">
    <transition mode="out-in" name="fade-transform">
      <div class="app-search-dialog">
        <div class="dialog-mask" @click="handleClose"></div>
        <div class="dialog-wrap">
          <el-autocomplete
            v-model="input"
            :fetch-suggestions="querySearch"
            class="app-search-input"
            placeholder="请输入关键词"
            size="medium"
            @select="handleSelect"
            @keydown.enter="handleSearch"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-autocomplete>
        </div>
      </div>
    </transition>
  </teleport>
</template>
<script>
import { ref, onMounted } from 'vue'
import useElement from '@/hook/useElement'
import { Search } from '@element-plus/icons'
import { ElAutocomplete } from 'element-plus'

export default {
  name: 'AppSearch',
  components: {
    ElAutocomplete,
    Search
  },
  emits: ['close'],
  setup(props, { emit }) {
    const restaurants = ref([])
    const input = ref('')
    const { element_id } = useElement()
    const querySearch = (queryString, cb) => {
      const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
      cb(results)
    }
    const createFilter = (queryString) => {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    }
    const loadAll = () => {
      return [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' }
      ]
    }
    const handleSelect = (item) => {
      console.log(item)
    }
    const handleSearch = () => {
      alert(input.value)
    }
    const handleClose = () => {
      emit('close')
    }
    onMounted(() => {
      restaurants.value = loadAll()
    })
    return {
      restaurants,
      input,
      element_id,
      querySearch,
      handleSelect,
      handleSearch,
      handleClose
    }
  }
}
</script>

<style lang="scss" scoped>
.app-search-dialog {
  position: relative;
  z-index: 999;
}
.dialog-wrap {
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 60%;
  background-color: #fff;
  border-radius: 8px;
}
.dialog-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
<style lang="scss">
.app-search-input {
  display: block !important;
  .el-input__inner {
    height: 60px !important;
    line-height: 60px !important;
    border: none;
  }
}
</style>
